<template>
	<view class="userInfo" style="background-color: #F3F4F5;min-height: 100vh;">
		<image src="../../static/images/user/bg.png" mode="" class="userBg"></image>
		<view class="infoHeader">
			<view class="infoOne">
				<view class="avatarOut">
					<image :src="info.avatar" mode="" class="avatar"></image>
					<image src="../../static/images/user/gender.png" mode="" class="gender"></image>
				</view>
				<view class="userInfo" style="align-items: flex-start;">
					<view class="nickName">{{info.nickname}}</view>
					<view class="age">{{info.birthday || '25岁'}}</view>
				</view>
			</view>
			<view class="infoTwo">
				<view class="twoBox">
					<view class="num">{{info.concern}}</view>
					<view>关注量</view>
				</view>
				<view class="twoBox">
					<view class="num">{{info.fans}}</view>
					<view>粉丝</view>
				</view>
				<view class="twoBox">
					<view class="num">{{info.activity}}</view>
					<view>活动</view>
				</view>
				<view class="twoBox">
					<view class="num">{{info.photo}}</view>
					<view>照片</view>
				</view>
			</view>
			<view class="tabOut">
				<view class="tab" v-for="(i, index) in tabList"
				 :class="index === select ? 'tabSelect' : ''"
				 :key="i"
				 @click="select = index, getPushList()"
				 >{{i}}</view>
				
			</view>
		</view>
		<view style="width: 100%;
		margin-top: 20rpx;">
		<article-list :list="list"></article-list>
		</view>
	</view>
</template>

<script>
	import {userInfo} from '../wish/request.js'
	import {pushList} from './request.js'
	import articleList from '@/components/article/list.vue';
	export default{
		components:{
			articleList
		},
		data () {
			return {
				uid: '',
				info: {},
				tabList: ['短讯', '文章', '视频'],
				select: 0,
				list: []
			}
		},
		onLoad(option) {
			this.uid = option.uid
			this.getInfo()
		},
		methods:{
			getInfo () {
				let data = {
					user_id: this.uid
				}
				userInfo(data).then(res => {
					console.log(res)
					if (res.data.code === 1) {
						this.info = res.data.data
						console.log(this.info)
						
					}
					this.getPushList()
				})
			},
			getPushList () {
				let params = {
					user_id: this.uid,
					type: this.select + 1,
					limit: 10,
					page: 1
				}
				pushList(params).then(res => {
					console.log(res.data.data.data)
					if (res.data.code === 1) {
						this.list = res.data.data.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.userInfo{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	.userBg{
		width: 100%;
		height: 290rpx;
		
	}
	.infoHeader{
		width: 100%;
		min-height: 200rpx;
		background-color: #FFFFFF;
		.infoOne{
			padding: 0 20rpx;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			.avatarOut{
				width: 120rpx;
				height: 120rpx;
				position: relative;
				margin-top: -30rpx;
				.avatar{
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
				.gender{
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}
			.nickName{
				color: #333333;
				font-size: 30rpx;
				margin-top: 16rpx;
				margin-left: 24rpx;
			}
			.age{
				color: #666666;
				font-size: 24rpx;
				margin-left: 24rpx;
				margin-top: 6rpx;
			}
		}
		.infoTwo{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 45rpx;
			padding-bottom: 26rpx;
			border-bottom: 1rpx solid #E3E3E3;
			.twoBox{
				flex: 1;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				color: #999999;
				font-size: 26rpx;
				.num{
					color: #333333;
					font-size: 34rpx;
					margin-bottom: 14rpx;
				}
			}
		}
		.tabOut{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 86rpx;
			.tab{
				flex: 1;
				text-align: center;
				color: #666666;
				font-size: 30rpx;
				padding-bottom: 10rpx;
			}
			.tabSelect{
				color: #FA9700;
				position: relative;
				
			}
			.tabSelect:after{
				content: "";
				position: absolute;
				width: 64rpx;
				height: 8rpx;
				border-radius: 4rpx;
				background-color: #FA9700;
				bottom: 0;
				left: calc(50% - 32rpx);
			}
		}
	}
</style>
